<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="params.name" clearable  @clear="getList"
      placeholder="请输入内容" class="search-main"/>
      <el-button type="primary" @click="getList">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="addenterprise">添加企业</el-button>
      <el-button type="info" plain @click="delmore">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" @selection-change="handleSelectionChange"  style="width: 100%" >
        <el-table-column type="selection" width="100"/> 
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text">添加合同</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="jump(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delenterprise(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <!-- <el-pagination
        layout="total, prev, pager, next"
      /> -->
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2,4, 6, 8, 10]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total='total'>
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { getenterpriseListAPI } from '@/api/enterprise'
import { delenterpriseAPI } from '@/api/enterprise'

export default {
  data(){
    return {
      list:[],
      total:0,
      params:{
        name:'',
        page: 1,
        pageSize: 4
      },
      form:{
        businessLicenseId:"",
        businessLicenseUrl:"",
        contact:"",
        contactNumber:"",
        industryCode:"" ,
        legalPerson:"",
        name:"" ,
        registeredAddress:"",

      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSelectionChange(row){
      this.ele = row
     },
    delmore(){
      let temp = this.ele
      for(let index = 0;index < temp.length;index++){
        setTimeout(() => {
          delenterpriseAPI(temp[index].id).then(() =>{
            this.getList()
          }).catch((error) =>{
            this.$message.error('删除失败!',error.response.data.msg)
          })
        }, 100);
      }
      this.$message.success('批量删除成功！')
    },
    jump(id){
      this.$router.push('/addenterprise?id='+id)//跳转界面,携带参数
    },
    delenterprise(id){
      // console.log(id);
      this.$confirm('确认要删除吗？').then(() => {
        delenterpriseAPI(id).then(() =>{
        this.$message.success('删除成功！')
        this.getList()
      }).catch((error) =>{
        this.$message.error('删除失败!')
        // this.$message.error(error.response.data.msg)
        console.log(error.response.data);
      })
      }).catch(() => {
        this.$message.error("删除失败！")
      })
    },
    addenterprise(){
    this.$router.push('/addenterprise')
  },
  handleSizeChange(pageSize){
    console.log(pageSize)
      this.params.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page){
      console.log(page)
      this.params.page = page
      this.getList()
    },

    getList(){
      getenterpriseListAPI(this.params).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
        console.log(res);
      })
    }
  },

 
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
